import { Input, Form, Button, message } from 'antd';
import type { FormProps } from 'antd';
import "../login/login.css"
import user from "../../../public/user.png"
import { useNavigate } from 'react-router';

import { useRequest } from 'ahooks';
import { LOGIN_PATHNAME } from '../../routers';
import { registerServer } from '../../server/userServer';


type FieldType = {
    username: string;
    password: string;
    confirm?: string;
    nickname: string
};

function Register() {
    const [form] = Form.useForm()
    const push = useNavigate()



    const onFinish: FormProps<FieldType>['onFinish'] = (values: FieldType) => {
        console.log(values);
        // const { username } = values
        // setUserInfo(username)
        // 
        const { username, password, nickname } = values
        run(username, password, nickname)

    };

    // 
    const { run } = useRequest(registerServer, {
        manual: true,
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        onSuccess(result) {
            message.loading('请稍等', 1.5)


            setTimeout(() => {
                push(LOGIN_PATHNAME)
            }, 1700)
        },
        onFinally() {

        },
    })
    return (
        <div className='login '>
            <div className="flex  justify-center items-center mb-8">
                <img src={user} className='ml-20 mr-2' />
                <div className='text-5.5'>用户登录</div>
            </div>

            <Form
                form={form}
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ RemEmb: false }}
                onFinish={onFinish}
                // onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item<FieldType>
                    label="用户名"
                    name="username"
                    rules={[{ required: true, message: '请输入用户名!' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item<FieldType>
                    label="密码"
                    name="password"
                    rules={[{ required: true, message: '请输入密码' }]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item
                    name="confirm"
                    label="确认密码"
                    dependencies={['password']}
                    hasFeedback
                    rules={[
                        {
                            required: true,
                            message: '请输入密码',
                        },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                if (!value || getFieldValue('password') === value) {
                                    return Promise.resolve();
                                }
                                return Promise.reject(new Error('两次输入的密码不一致'));
                            },
                        }),
                    ]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item<FieldType>
                    label="昵称"
                    name="nickname"
                    tooltip="你希望别人怎么称呼你?"
                    rules={[{ required: true, message: '请输入您的昵称!', whitespace: true }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item label={null}>
                    <Button type="primary" htmlType="submit">
                        注册
                    </Button>
                    <span className='pl-2 c-primary ' style={{ cursor: 'pointer' }}
                        onClick={() => {
                            push('/login')
                        }}
                    >已有账户,登录</span>
                </Form.Item>
            </Form>

        </div>

    )
}

export default Register
